<template>
  <view
    class="maintenance_box"
    @touchmove="refresh.moveTouchendHandler"
    @touchstart="refresh.startTouchendHandler"
    @touchend="refresh.endTouchendHandler"
  >
    <!-- 菜单列表 -->
    <menu-navigation-bar
      :menu-list="menuList"
      :is-sticky="true"
      @on-selected="onMenuSelect"
    />

    <!-- 内容列表 -->
    <view class="content">
      <maintenance-orders
        v-for="(item, index) in dataList"
        @on-click="toDetail(item)"
        :key="index"
        :address="item.maintenanceAddress"
        :state="item.maintenanceState"
        :times="item.maintenanceTime.toString()"
        :create-times="item.updateTime ? item.updateTime.toString() : ''"
        :title="item.maintenanceTitle"
      />
    </view>

    <!-- 悬浮按钮 -->
    <view class="levitation" @click="toAdd">
      <uni-icons type="compose" size="30" />
    </view>

    <!-- 加载状态 -->
    <load :status="loadStatue" :isImage="dataList.length<1"  />

    <!-- 下拉刷新 -->
    <pull-down-refresh
      :opacity="refresh.moveBottom.value / 3"
      :enble-anim="refresh.isRefresh.value"
    />
  </view>
</template>

<!-- 我的维修页面 -->
<script lang="ts" setup>
import { MaintenanceStateEnum } from '@/config/enum/enum'
import { refreshHandler } from '@/components/common/pull_down_refresh/index'
import menuNavigationBar from '@/components/layout/menu_navigation_bar/menu-navigation-bar.vue'
import { ReqSelectMaintenancePage } from '@/api/maintenance'
import maintenanceOrders from '@/components/business/orders/maintenance-orders.vue'
import type {
  PageMaintenance,
  QueryPageByMaintenance,
} from '@/config/data/data'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { ref, watch } from 'vue'

//防止重复提交
const isReq = ref(true)

//跳转订单创建页面
const toAdd = () => {
  uni.navigateTo({ url: '/subpkg/maintenance/maintenance_choose' })
}

//菜单变更
const onMenuSelect = (index: number) => {
  queryPage.value.state = menuList.value[index]
}

//下拉刷新控制函数
const refresh = refreshHandler(300)

//菜单列表
const menuList = ref<string[]>([])

//查看详情
const toDetail = (item: PageMaintenance) => {
  uni.navigateTo({
    url: `/subpkg/maintenance/maintenance_detail?id=${item.maintenanceId}`,
  })
}

//加载状态
const loadStatue = ref(1)

//数据列表
const dataList = ref<PageMaintenance[]>([])

//分页参数
const queryPage = ref<QueryPageByMaintenance>({
  page: 0,
  size: 5,
  state: '',
})

//菜单变更
watch(
  () => queryPage.value.state,
  (newValue, oldValue) => {
    queryPage.value.page = 0
    nextData(true).finally(() => {
      refresh.refreshEnd(500)
    })
  }
)

//刷新状态变更
watch(
  () => refresh.isRefresh.value,
  (newValue, oldValue) => {
    if (newValue) {
      queryPage.value.page = 0
      nextData(true).finally(() => {
        refresh.refreshEnd(500)
      })
    }
  }
)

/**
 * 下一页数据
 * @param refresh: 是否刷新
 */
const nextData = (refresh: boolean = false) => {
  return new Promise((reslove) => {
    if (!isReq.value) {
      reslove(true)
      return
    }
    isReq.value = false
    queryPage.value.page += 1
    loadStatue.value = 0
    refresh ? (dataList.value = []) : ''
    ReqSelectMaintenancePage(queryPage.value)
      .then((res) => {
        if (res.code == 200 && res.data) {
          dataList.value.push(...res.data)
          loadStatue.value = res.data.length == queryPage.value.size ? 1 : -1
        }
      })
      .catch((err) => {
        loadStatue.value = -2
        setTimeout(() => {
          loadStatue.value = -1
        }, 100)
      })
      .finally(() => {
        reslove(true)
        isReq.value = true
      })
  })
}

//初始化数据、菜单列表
const initData = () => {
  menuList.value.push('全部')
  for (let msg in MaintenanceStateEnum) {
    if (MaintenanceStateEnum.hasOwnProperty(msg)) {
      menuList.value.push(
        MaintenanceStateEnum[msg as keyof typeof MaintenanceStateEnum]
      )
    }
  }
  nextData()
}

//页面加载
onLoad(() => {
  initData()
})

//页面滑动底部
onReachBottom(() => {
  nextData()
})
</script>

<style scoped lang="scss">
.maintenance_box {
  width: 100%;
  min-height: 100%;
  background-color: $uni-bg-color-grey;

  .levitation {
    position: fixed;
    right: 10%;
    bottom: 20%;
    width: 100rpx;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $uni-bg-color;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border-radius: 50%;
  }

  .content {
    padding: 0 30rpx 30rpx;
    width: calc(100% - 60rpx);
  }
}
</style>
